<template>
  <div class="app-container">
    <!-- 顶部标题 -->
    <h2 class="text-xl font-medium mb-4">管理职位</h2>
    <el-row :gutter="10">
      <!-- 标签页 -->
      <el-tabs
        v-model="activeTab"
        style="overflow: hidden; margin-bottom: -1px; position: relative"
      >
        <!-- 发布中 -->
        <el-tab-pane label="发布中" name="1">
          <!-- 提示信息 -->
          <el-alert
            type="warning"
            :closable="false"
            class="my-4"
            style="padding: 16px; margin-bottom: 20px"
          >
            <i class="el-icon-info mr-2"></i>
            亲爱的HR，您的账号可同时发布 20 个职位，现已发布 1
            个(包含审核中和未通过的)职位。
          </el-alert>
          <!-- 职位列表 -->
          <el-table
            :data="releaseList"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              prop="experienceText"
              label="职位名称"
              align="center"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.jobname }}</div>
                <div>
                  <el-button
                    type="text"
                    size="mini"
                    :disabled="scope.row.isUpdate === 0"
                    @click="editPosition(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    @click="goToMatch(scope.row)"
                    >匹配</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    @click="close(scope.row.id)"
                    >关闭</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    :disabled="scope.row.isUpdate === 0"
                    @click="delOneClick(scope.row.id)"
                    >删除</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    @click="refreshClick(scope.row.id)"
                    >[刷新]</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              label="招聘情况"
              align="center"
              width="300"
            >
              <template slot-scope="scope">
                <div class="situation">
                  <div class="deliver">
                    <img src="@/assets/common/投递.png" alt="" /> 被投递{{
                      scope.row.resumeNolook
                    }}次
                  </div>
                  <div class="browse">
                    <img src="@/assets/common/浏览.png" alt="" />
                    被浏览{{ scope.row.click }}次
                  </div>
                </div>
                <div class="share">
                  <img src="@/assets/common/分享.png" alt="" />
                  分享到朋友圈
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="wageText" label="薪资区间">
            </el-table-column>
            <el-table-column prop="" label="收到简历" align="center">
              <template slot-scope="scope">
                <span style="color: #ff704f; font-size: 14px">{{
                  scope.row.resumeNolook
                }}</span
                >/{{ scope.row.resumeAll }}份
                <div class="text-sm text-gray-500">未查看简历</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="职位状态" align="center">
              <template>
                <el-tag size="small" type="primary">发布中</el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column label="职位推广" width="300" align="center">
              <template>
                <el-button
                  type="danger"
                  size="small"
                  @click="topUPDialog = true"
                  >职位置顶</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  @click="refreshDialog = true"
                  >智能刷新</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  @click="hireDialog = true"
                  >紧急招聘</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>

          <div class="tabs" style="margin-top: 20px">
            <el-button size="small" @click="batchClose">关闭</el-button>
            <el-button size="small" @click="delReleaseBtn">删除</el-button>
          </div>

          <!-- 分页 -->
          <el-row type="flex" justify="end">
            <el-pagination
              background
              @size-change="handleReleaseSizeChange"
              @current-change="handleReleaseCurrentChange"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="releaseTotal"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>

        <!-- 审核中 -->
        <el-tab-pane label="审核中" name="2">
          <!-- 提示信息 -->
          <el-alert
            type="warning"
            :closable="false"
            class="my-4"
            style="padding: 16px; margin-bottom: 20px"
          >
            <i class="el-icon-info mr-2"></i>
            亲爱的HR，您的账号可同时发布 20 个职位，现已发布 1
            个(包含审核中和未通过的)职位。
          </el-alert>
          <el-table
            :data="auditList"
            style="width: 100%"
            @selection-change="handleSelectionAuditChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="jobname" label="职位名称" width="width">
            </el-table-column>
            <el-table-column
              prop="experienceText"
              label="工作经验"
              width="width"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="jobStatusCn"
              label="职位状态"
              width="width"
              align="center"
            >
              <template>
                <el-tag size="small" type="warning">审核中</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="prop"
              label="操作"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="editPosition(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="auditDle(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-button style="margin-top: 20px" size="small" @click="auditDelBtn"
            >删除</el-button
          >
          <el-row :gutter="10" type="flex" justify="end">
            <el-pagination
              background
              @size-change="handleAuditSizeChange"
              @current-change="handleAuditCurrentChange"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="auditTotal"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>

        <!-- 已下线 -->
        <el-tab-pane label="已下线" name="3">
          <!-- 提示信息 -->
          <el-alert
            type="warning"
            :closable="false"
            class="my-4"
            style="padding: 16px; margin-bottom: 20px"
          >
            <i class="el-icon-info mr-2"></i>
            亲爱的HR，您的账号可同时发布 20 个职位，现已发布 1
            个(包含审核中和未通过的)职位。
          </el-alert>
          <el-table
            :data="positionOfflineList"
            style="width: 100%"
            @selection-change="handleSelectionOfflineChange"
          >
            <el-table-column prop="" label="" width="50" type="selection">
            </el-table-column>
            <el-table-column
              prop="experienceText"
              label="职位名称"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-link type="primary" :href="scope.row.jobLinkUrlWeb">{{
                  scope.row.jobname
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="wageText"
              label="工资区间"
              width="width"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="resumes" label="收到简历" align="center">
              <template slot-scope="scope">
                <span style="color: #ff704f; font-size: 14px">{{
                  scope.row.resumeNolook
                }}</span
                >/{{ scope.row.resumeAll }}份
                <div class="text-sm text-gray-500">未查看简历</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="isDisplay"
              label="职位状态"
              width="width"
              align="center"
            >
              <template>
                <el-tag type="info">已下线</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="prop"
              label="操作"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-button size="small" @click="restoreClick(scope.row.id)"
                  >恢复</el-button
                >
                <el-button size="small" @click="OfflineDel(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-button
            style="margin-top: 20px"
            size="small"
            @click="OfflineDelBtn"
            >删除</el-button
          >
          <el-row :gutter="10" type="flex" justify="end">
            <el-pagination
              background
              @size-change="handleOfflineSizeChange"
              @current-change="handleOfflineCurrentChange"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="offlineTotal"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <!-- 新增职位按钮 -->
      <el-button
        size="small"
        icon="el-icon-plus"
        style="background: #ff7859; color: #fff8f6"
        @click="postPosition"
        class="positionBtn"
        >发布职位</el-button
      >
    </el-row>

    <!-- 职位置顶 -->
    <el-dialog
      title="购买职位置顶"
      :visible.sync="topUPDialog"
      width="30%"
      class="topUP"
      center
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="选择服务">
          <el-select v-model="model" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应付金额">0元</el-form-item>
        <el-form-item label="">
          <el-button type="primary">立即兑换</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 智能刷新 -->
    <el-dialog
      title="购买职位智能刷新"
      :visible.sync="refreshDialog"
      width="30%"
      center
      class="refresh"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="选择服务">
          <el-select v-model="model" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="刷新间隔">
          <el-select v-model="model" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应付金额">0元</el-form-item>
        <el-form-item label="">
          <el-button type="primary">立即兑换</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 紧急招聘 -->
    <el-dialog
      title="购买职位紧急"
      :visible.sync="hireDialog"
      width="30%"
      class="hire"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="选择服务">
          <el-select v-model="model" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应付金额">0元</el-form-item>
        <el-form-item label="">
          <el-button type="primary">立即兑换</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  positionListApi,
  operationPositionByIdApi,
  refreshPositionByIdApi,
} from "@/api/position";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      activeTab: "1",
      currentPage: 1,
      topUPDialog: false,
      refreshDialog: false,
      hireDialog: false,
      // 发布中
      releaseTotal: "",
      // 审核中
      auditTotal: "",
      // 下线
      offlineTotal: "",
      jobList: [
        {
          title: "抛光检验",
          updateTime: "2024-10-31",
          deliveryCount: 0,
          resumeCount: 0,
          status: "published",
        },
        // 更多职位数据...
      ],
      // 职位列表请求参数
      positionQuery: {
        audit: 1,
        page1: 1,
        pageSize: 10,
        uid: "",
      },
      // 职位发布数据
      releaseList: [],
      // 恢复职位
      restorePositionQuery: {
        id: "",
        type: 2,
      },
      // 企业id批量操作职位
      ids: [],
      type: 1,
      // 企业id操作职位
      operateQuery: {
        id: "",
        type: 1,
      },
      // 删除企业id
      delOperateQuery: {
        id: "",
        type: 0,
      },
      // 已下线列表
      positionOfflineList: [],
      selectedJobs: [],
      auditList: [],
    };
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  watch: {
    async activeTab(newVal, oldVal) {
      if (newVal === "2") {
        this.positionQuery.audit = 2;
        const res = await positionListApi(this.positionQuery);
        this.auditList = res.records;
        this.auditTotal = res.total;
      } else if (newVal === "1") {
        this.positionQuery.audit = 1;
        const res = await positionListApi(this.positionQuery);
        this.releaseList = res.records;
        this.releaseTotal = res.total;
      } else if (newVal === "3") {
        this.positionQuery.audit = 3;
        const res = await positionListApi(this.positionQuery);
        this.positionOfflineList = res.records;
        this.offlineTotal = res.total;
        console.log(this.positionOfflineList);
      }
    },
  },
  created() {
    this.positionQuery.uid = this.userId;
    this.positionList();
  },
  methods: {
    // 左侧下线删除
    handleSelectionOfflineChange(selection) {
      this.ids = selection.map((item) => item.id);
      console.log(this.ids);
    },
    // 下线删除
    OfflineDel(id) {
      console.log(id);
      this.$confirm("确定删除选中的职位吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            this.ids.push(id);
            this.type = 0;
            const res = await operationPositionByIdApi(this.type, this.ids);
            if (res.code === 1) {
              this.$message.success("删除成功!");
              this.ids = [];
              this.positionQuery.audit = 3;
              const res = await positionListApi(this.positionQuery);
              this.positionOfflineList = res.records;
              this.offlineTotal = res.total;
            } else {
              this.$message.error("删除失败");
            }
          } catch {
            // this.$message.error("删除失败");
          }
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    // 下线批量删除
    OfflineDelBtn() {
      if (this.ids.length === 0) {
        this.$message.error("请选择职位");
        return;
      }

      this.$confirm("确定删除选中的职位吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            this.type = 0;
            const res = await operationPositionByIdApi(this.type, this.ids);
            if (res.code === 1) {
              this.$message.success("删除成功!");
              this.ids = [];
              this.positionQuery.audit = 3;
              this.positionList();
            } else {
              this.$message.error("删除失败");
            }
          } catch {
            // this.$message.error("删除失败");
          }
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    // 审核列表选择
    handleSelectionAuditChange(selection) {
      this.ids = selection.map((item) => item.id);
      console.log(this.ids);
    },
    auditDelBtn() {
      if (this.ids.length === 0) {
        this.$message.error("请选择职位");
        return;
      }
      this.$confirm("确定删除选中的职位吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.type = 0;
          const res = await operationPositionByIdApi(this.type, this.ids);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("删除成功!");
            this.ids = [];
            this.positionQuery.audit = 2;
            this.positionList();
          } else {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 发布中列表删除
    delOneClick(id) {
      console.log(id);
      this.$confirm("确定删除该职位吗, 是否继续?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.ids.push(id);
          this.type = 0;
          const res = await operationPositionByIdApi(this.type, this.ids);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("删除成功!");
            this.ids = [];
            this.positionQuery.audit = 1;
            const res = await positionListApi(this.positionQuery);
            this.releaseList = res.records;
            this.releaseTotal = res.total;
          } else {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {});
    },
    // 职位列表查询
    async positionList() {
      const res = await positionListApi(this.positionQuery);
      this.releaseList = res.records;
      this.releaseTotal = res.total;
      console.log(this.releaseList);
    },
    // 批量关闭
    batchClose() {
      if (this.ids.length === 0) {
        this.$message.error("请选择职位");
        return;
      }
      this.$confirm("确定关闭选中的职位吗?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            this.type = 1;
            const res = await operationPositionByIdApi(this.type, this.ids);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("关闭岗位成功!");
              this.ids = [];
              this.positionQuery.audit = 3;
              this.positionList();
              this.activeTab = "3";
            }
          } catch {
            this.$message.error("关闭岗位失败");
          }
        })
        .catch(() => {});
    },
    // 恢复职位
    restoreClick(id) {
      this.$confirm("确定恢复该职位吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            this.ids.push(id);
            this.type = 2;
            const res = await operationPositionByIdApi(this.type, this.ids);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("恢复成功!");
              // 更新positionQuery的audit属性为发布中状态
              this.positionQuery.audit = 1;
              this.ids = [];
              this.positionList();
              this.activeTab = "1";
            } else {
              this.$message.error("恢复失败");
            }
          } catch {
            this.$message.error("恢复失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 发布职位页数改变
    handleReleaseSizeChange(pageSize) {
      console.log(pageSize);
      this.positionQuery.pageSize = pageSize;
      this.positionList();
    },
    // 发布职位页码改变
    handleReleaseCurrentChange(page) {
      console.log(page);
      this.positionQuery.page1 = page;
      this.positionList();
    },
    // 审核职位页数改变
    handleAuditSizeChange(pageSize) {
      console.log(pageSize);
      this.positionQuery.pageSize = pageSize;
      this.positionList();
    },
    // 审核职位页码改变
    handleAuditCurrentChange(page) {
      this.positionQuery.page1 = page;
      this.positionList();
    },
    // 当选择职位时
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      console.log(this.ids);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 发布职位
    postPosition() {
      this.$router.push({
        name: "postPosition",
      });
    },
    // 审核刷新
    async refreshClick(id) {
      this.$confirm("确定刷新该职位吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            console.log(id);
            const res = await refreshPositionByIdApi(id);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("刷新成功!");
            } else {
              this.$message.error(res.msg);
            }
          } catch {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 刷新
    refresh() {
      this.$confirm("确定刷新选中的职位吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭
    close(id) {
      try {
        this.$confirm("确定关闭选中的职位吗？", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            try {
              this.type = 1;
              this.ids.push(id);
              const res = await operationPositionByIdApi(this.type, this.ids);
              console.log(res);
              if (res.code === 1) {
                this.$message.success("关闭岗位成功!");
                this.ids = [];
                this.positionQuery.audit = 3;
                this.positionList();
                this.activeTab = "3";
              } else {
                this.$message.error("关闭岗位失败!");
              }
            } catch {
              this.$message.error("关闭岗位失败!");
            }
          })
          .catch(() => {});
      } catch {}
    },
    // 发布底部删除
    delReleaseBtn() {
      if (this.ids.length === 0) {
        this.$message.error("请选择职位");
        return;
      }
      this.$confirm("确定删除选中的职位吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.type = 0;
          const res = await operationPositionByIdApi(this.type, this.ids);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("删除成功!");
            this.ids = [];
            this.positionQuery.audit = 1;
            this.positionList();
          } else {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 审核列表删除
    async auditDle(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该职位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            this.ids.push(id);
            this.type = 0;
            const res = await operationPositionByIdApi(this.type, this.ids);
            if (res.code === 1) {
              this.$message.success("删除成功!");
              this.ids = [];
              this.positionQuery.audit = 2;
              const res = await positionListApi(this.positionQuery);
              this.auditList = res.records;
              this.auditTotal = res.total;
            } else {
              this.$message.error("删除失败");
            }
          } catch {
            // this.$message.error("删除失败");
          }
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    // 修改职位
    editPosition(row) {
      this.$router.push({
        name: "editPosition",
        params: {
          row: row,
        },
      });
      localStorage.setItem("editFormPosition", JSON.stringify(row));
    },
    // 跳转到智能推荐页面
    goToMatch(row) {
      console.log(row);
      this.$router.push({
        name: "recommend",
        query: {
          jobId: row.id,
        },
      });
    },
  },
};
</script>

<style lang="scss">
.job-management {
  padding: 20px;
}
.situation {
  display: flex;
  margin: 0 45px;
  .deliver {
    width: 110px;
    position: relative;
    padding-left: 20px;
    text-align: left;
    img {
      vertical-align: middle;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .browse {
    width: 110px;
    position: relative;
    padding-left: 20px;
    text-align: left;
    img {
      vertical-align: middle;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.share {
  display: flex;
  margin: 0 45px;
  width: 110px;
  position: relative;
  padding-left: 20px;
  text-align: left;
  img {
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.positionBtn {
  position: absolute;
  right: 0;
  top: 0;
  background: #ff7859;
  color: #fff8f6;
  margin-right: 20px;
  border: 0;
}

.topUP {
  .el-dialog__header {
    background-color: #f3f3f3;
  }
}

.refresh {
  .el-dialog__header {
    background-color: #f3f3f3;
  }
}

.hire {
  .el-dialog__header {
    background-color: #f3f3f3;
  }
}
</style>
